<template>
    <div class="container">
        <header>
            <ul>
                <li
                    v-for="(item, index) of navData"     
                    :key="index"
                    :class="item.className"
                    @click="toggle(index, item.routePath)"
                >{{ item.title }}</li>
            </ul>
        </header>
        <router-view></router-view>
    </div>
</template>

<script setup>
    import { reactive, inject, watch } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    const router = useRouter();
    const route = useRoute();

    const emitter = inject('emitter');



    const navData = reactive([
        {title: '推荐', routePath: 'recommend', className: 'select'},
        {title: '排行榜', routePath: 'listRanking', className: ''},
        {title: '歌单', routePath: 'songSheet', className: ''},
        {title: '主播电台', routePath: 'anchor', className: ''},
        {title: '歌手', routePath: 'singer', className: ''},
        {title: '新碟上映', routePath: 'newDisc', className: ''}
    ])


    
    emitter.on('discoverNavStyleToggle', (index) => {
        navData.forEach((value, i) => {
            if(index === i) {
                value.className = 'select';
            } else {
                value.className = '';
            }
        })
    })
    const toggle = (index, path) => {
        emitter.emit('discoverNavStyleToggle', index);
        router.push({ name: path })
    }





    watch(route, (newValue) => {
        let arrIndex = 0;
        if(newValue.name === 'detail') {
            arrIndex = 1; 
        } else {
            navData.some((item, index) => {
                if(item.routePath === newValue.name)  {
                    arrIndex = index;
                    return;
                }
            }) 
        }
        emitter.emit('discoverNavStyleToggle', arrIndex)
    }, {
        immediate: true
    }) 


</script>

<style lang='less' scoped>
    .container{
        header{
            height: 34px;
            background-color: #C20C0C;
            line-height: 34px;
            ul{
                margin: 0 auto;
                width: 1100px;
                color: white;
                font-size: 13px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 100%;
                li{
                    border-radius: 10px;
                    text-align: center;
                    height: 20px;
                    line-height: 19px;
                    padding: 2px 13px;
                    cursor: pointer;
                    &:first-child{
                        margin-left: 185px;
                    }
                    &:last-child{
                        margin-right: 380px;
                    }
                    &:hover{
                        background-color: #9b0909;
                    }
                }
                .select{
                    background-color: #9b0909;
                    padding: 2px 13px;
                }
            }
        }
    }
</style>